<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网上杂货店</title>

    <!-- font awesome cdn 链接  -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />

    <!-- 自制css链接 -->
    <link rel="stylesheet" href="css/style.css" />
    <script src="./script.js"></script>
  </head>
  <body>
    <!-- header开始 -->

    <header>
      <div class="header-1">
        <a href="#" class="logo"><i class="fas fa-shopping-basket"></i>groco</a>
        <form action="" class="search-box-container">
          <input type="search" id="search-box" placeholder="输入搜索项目" />
          <label for="search-box" class="fas fa-search"></label>
        </form>
      </div>

      <div class="header-2">
        <div id="menu-bar" class="fas fa-bars"></div>
        <nav class="navbar">
          <a href="#home">home</a>
          <a href="#category">category</a>
          <a href="#product">product</a>
          <a href="#deal">deal</a>
          <a href="#contact">contact</a>
        </nav>
        <div class="icons">
          <a href="#" class="fas fa-shopping-cart"></a>
          <a href="#" class="fas fa-heart"></a>
          <a href="#" class="fas fa-user-circle"></a>
        </div>
      </div>
    </header>

    <!-- header结束 -->
    <!-- home开始 -->

    <section class="home" id="home">
      <div class="image">
        <img src="images/home-img.png" alt="" />
      </div>

      <div class="content">
        <span>fresh and organic</span>
        <h3>your daily need products</h3>
        <a href="#" class="btn">get started</a>
      </div>
    </section>

    <!-- home结束 -->
    <!-- banner开始  -->

    <section class="banner-container">
      <div class="banner">
        <img src="images/banner-1.jpg" alt="" />
        <div class="content">
          <h3>special offer</h3>
          <p>upto 45% off</p>
          <a href="#" class="btn">check out</a>
        </div>
      </div>

      <div class="banner">
        <img src="images/banner-2.jpg" alt="" />
        <div class="content">
          <h3>limited offer</h3>
          <p>upto 50% off</p>
          <a href="#" class="btn">check out</a>
        </div>
      </div>
    </section>

    <!-- banner结束 -->
    <!-- category开始  -->

    <section class="category" id="category">
      <h1 class="heading">shop by <span>category</span></h1>
      <div class="box-container">
        <div class="box">
          <h3>vegitables</h3>
          <p>upto 50% off</p>
          <img src="images/category-1.png" alt="" />
          <a href="#" class="btn">shop now</a>
        </div>
        <div class="box">
          <h3>juice</h3>
          <p>upto 44% off</p>
          <img src="images/category-2.png" alt="" />
          <a href="#" class="btn">shop now</a>
        </div>
        <div class="box">
          <h3>meat</h3>
          <p>upto 35% off</p>
          <img src="images/category-3.png" alt="" />
          <a href="#" class="btn">shop now</a>
        </div>
        <div class="box">
          <h3>fruite</h3>
          <p>upto 12% off</p>
          <img src="images/category-4.png" alt="" />
          <a href="#" class="btn">shop now</a>
        </div>
      </div>
    </section>

    <!-- category结束 -->
    <!-- product开始  -->

    <section class="product" id="product">
      <h1 class="heading">latest <span>products</span></h1>
      <div class="box-container">
        <div class="box">
          <span class="discount">-33%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-1.png" alt="" />
          <h3>organic banana</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>

        <div class="box">
          <span class="discount">-45%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-2.png" alt="" />
          <h3>organic tomato</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>

        <div class="box">
          <span class="discount">-52%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-3.png" alt="" />
          <h3>organic orange</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>

        <div class="box">
          <span class="discount">-13%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-4.png" alt="" />
          <h3>natural mild</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>

        <div class="box">
          <span class="discount">-20%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-5.png" alt="" />
          <h3>organic grapes</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>

        <div class="box">
          <span class="discount">-29%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-6.png" alt="" />
          <h3>natural almonts</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>

        <div class="box">
          <span class="discount">-55%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-7.png" alt="" />
          <h3>organic apple</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>

        <div class="box">
          <span class="discount">-30%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-8.png" alt="" />
          <h3>natural butter</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>

        <div class="box">
          <span class="discount">-40%</span>
          <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
          </div>
          <img src="images/product-9.png" alt="" />
          <h3>organic carrot</h3>
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
          <div class="price">$10.50 <span> $13.20 </span></div>
          <div class="quantity">
            <span>quantity : </span>
            <input type="number" min="1" max="1000" value="1" />
            <span> /kg </span>
          </div>
          <a href="#" class="btn">add to cart</a>
        </div>
      </div>
    </section>

    <!-- product结束 -->
    <!-- deal开始-->

    <section class="deal" id="deal">
      <div class="content">
        <h3 class="title">deal of the day</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam
          possimus voluptates commodi laudantium! Doloribus sint voluptatibus
          quaerat sequi suscipit nulla?
        </p>
        <div class="count-down">
          <div class="box">
            <h3 id="day">00</h3>
            <span>day</span>
          </div>
          <div class="box">
            <h3 id="hour">00</h3>
            <span>hour</span>
          </div>
          <div class="box">
            <h3 id="minute">00</h3>
            <span>minute</span>
          </div>
          <div class="box">
            <h3 id="second">00</h3>
            <span>second</span>
          </div>
        </div>
        <a href="#" class="btn">check the deal</a>
      </div>
    </section>

    <!-- deal结束 -->
    <!-- contact开始  -->

    <section class="contact" id="contact">
      <h1 class="heading"><span>contact</span> us</h1>
      <form action="">
        <div class="inputBox">
          <input type="text" placeholder="name" />
          <input type="email" placeholder="email" />
        </div>
        <div class="inputBox">
          <input type="number" placeholder="number" />
          <input type="text" placeholder="subject" />
        </div>
        <textarea
          placeholder="message"
          name=""
          id=""
          cols="30"
          rows="10"
        ></textarea>
        <input type="submit" value="send message" class="btn" />
      </form>
    </section>

    <!-- contact结束 -->
    <!-- newsletter开始  -->

    <section class="newsletter">
      <h3>subscribe us for latest updates</h3>
      <form action="">
        <input class="box" type="email" placeholder="enter your email" />
        <input type="submit" value="subscribe" class="btn" />
      </form>
    </section>

    <!-- newsletter结束 -->
    <!-- footer开始  -->

    <section class="footer">
      <div class="box-container">
        <div class="box">
          <a href="#" class="logo">
            <i class="fas fa-shopping-basket"></i>groco
          </a>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam
            culpa sit enim nesciunt rerum laborum illum quam error ut alias!
          </p>
          <div class="share">
            <a href="#" class="btn fab fa-facebook-f"></a>
            <a href="#" class="btn fab fa-twitter"></a>
            <a href="#" class="btn fab fa-instagram"></a>
            <a href="#" class="btn fab fa-linkedin"></a>
          </div>
        </div>

        <div class="box">
          <h3>our location</h3>
          <div class="links">
            <a href="#">india</a>
            <a href="#">USA</a>
            <a href="#">france</a>
            <a href="#">japan</a>
            <a href="#">russia</a>
          </div>
        </div>

        <div class="box">
          <h3>quick links</h3>
          <div class="links">
            <a href="#">home</a>
            <a href="#">category</a>
            <a href="#">product</a>
            <a href="#">deal</a>
            <a href="#">contact</a>
          </div>
        </div>

        <div class="box">
          <h3>download app</h3>
          <div class="links">
            <a href="#">google play</a>
            <a href="#">window xp</a>
            <a href="#">app store</a>
          </div>
        </div>
      </div>

      <h1 class="credit">
        created by <span> mr. web designer </span> | all rights reserved!
      </h1>
    </section>

    <!-- footer结束 -->
    <!-- 自制js链接 -->
    <script src="js/script.js"></script>
  </body>
</html>
